<template>
  <!-- 查：
       1：定义获取权限管理数据的api
       2:导入api
       3:进入页面就调用相应api获取数据并存储
       4：渲染相应的数据

    table树形数据渲染
      1：数据中要有children
      2:el-table  row-key="数据的唯一标识"

      增
       1：创建一个新增弹框组件
       2：在父组件内导入注册使用
       3：点击新增按钮打开弹框
       4：完成弹框组件内的表单布局
       5：完成弹框组件内的表单验证
          a:值的绑定
          b:el-form  model   rules  ref
          c:el-form-item   prop
          d:写rules
          f:确定按钮全局表单验证  validate方法调用
       6：定义新增api
       7:导入新增api
       8:点击确定在表单验证通过后调用
       9：调用成功
          a:提示
          b:关闭弹框
          c:关闭弹框时统一处理清空表单数据与验证
          d:刷新父级列表数据

      删：
        1:定义删除api
        2:导入删除api
        3:点击删除按钮，弹出确定框
        4：在点击确定框的确定按钮后调用删除api
        5:调用成功，
           a:提示
           b:如果有分页
              页码>1  数据条数===1
              页码--
              再刷新列表
            没有分页：刷新列表

      改；
        1：点击编辑按钮打开新增弹框
        2：新增弹框组件内定义一个变量用于区分新增与编辑  mode="add/edit"
        3：点击新增与编辑打开弹框时都要修改相应新增组件内的变量值为相应场景的值
        4:调整标题
        5：编辑时表单回显数据：注意点要注意数据的深拷贝
        6：如果有表单验证要调整就调整一下，没有就跳过
        7：定义编辑api
        8:导入编辑api
        9:点击确定分场景调用编辑api
           调用成功
             a:提示
             b:关闭弹框
             c:统一处理清空表单与清除验证
             d:刷新父级列表数据

 -->

  <div class="permission">
    <el-card>
      <div style="text-align: right">
        <el-button
          type="primary"
          size="small"
          @click="addEvent2('0', 1)"
        >添加权限</el-button>
      </div>
    </el-card>
    <el-card style="margin-top: 15px">
      <el-table :data="list" border row-key="id">
        <el-table-column label="名称" prop="name" />
        <el-table-column label="标识" prop="code" />
        <el-table-column label="描述" prop="description" />
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button
              v-if="row.type === 1"
              type="text"
              @click="addEvent2(row.id, 2)"
            >添加</el-button>
            <el-button type="text" @click="editEvent(row)">编辑</el-button>
            <el-button type="text" @click="delEvent(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 新增弹框组件 -->
    <Add ref="add" @getData="getData" />
  </div>
</template>
<script>
import { sysPermission, sysPermissionDelete } from '@/api/permission'
import Add from './components/add'
export default {
  components: {
    Add
  },
  data() {
    return {
      list: []
    }
  },
  created() {
    console.log('children:', this.$children)
    this.getData()
  },
  methods: {
    // 获取权限数据列表
    async getData() {
      const res = await sysPermission()
      this.list = this.changeData(res.data, '0')
      console.table(res.data)
    },
    // 树形数据转换
    changeData(arr, pid) {
      // 取出第一层数据
      return arr.filter((item) => {
        if (item.pid === pid) {
          // 添加children
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    },
    // 新增点击事件添加页面===最外层页面的添加 pid='0'
    addEvent() {
      // 打开弹框
      this.$refs.add.isShow = true
    },
    // 新增按钮点击添加按钮===按钮的添加
    addEvent2(id, type) {
      // 打开弹框
      this.$refs.add.isShow = true
      // 修改mode
      this.$refs.add.mode = 'add'
      // 将add组件内的pid=当前点击项的id
      this.$refs.add.form.pid = id
      // 添加的是按钮
      this.$refs.add.form.type = type
    },
    // 删除点击事件
    delEvent(id) {
      this.$confirm('您确定删除该项吗？', '提示')
        .then(async() => {
          await sysPermissionDelete(id)
          this.$message.success('删除成功')
          // 刷新列表
          this.getData()
        })
        .catch(() => {})
    },
    // 编辑点击事件
    editEvent(row) {
      // 打开弹框
      this.$refs.add.isShow = true
      // 修改mode
      this.$refs.add.mode = 'edit'
      // 回显数据
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
    }
  }
}
</script>
<style lang="scss" scoped>
.permission {
  padding: 15px;
}
</style>
